import 'package:demo/provider/view_model/shopping_cart_view_model.dart';
import 'package:demo/provider/widget/base_provider_widget.dart';
import 'package:demo/widget/pull_refresh.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ShoppingCartPage extends StatefulWidget {
  @override
  _ShoppingCartPageState createState() => _ShoppingCartPageState();
}

class _ShoppingCartPageState extends State<ShoppingCartPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  /// view model
  late final ShoppingCartViewModel _shoppingCartViewModel = ShoppingCartViewModel();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    _shoppingCartViewModel.dispose();
    super.dispose();
  }

  void _onModelReady(ShoppingCartViewModel shoppingCartViewModel) {}

  /// 下啦刷新
  Future<ActionStatus> _onRefresh() async {
    return await Future.delayed(
      const Duration(seconds: 2),
      () {
        _shoppingCartViewModel.recommendGoodsItems = [
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
          "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1147110391,1099568746&fm=173&app=25&f=JPEG?w=640&h=640&s=4BA43A625AFA7BAF7D302CC60000A0A1",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
          "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1147110391,1099568746&fm=173&app=25&f=JPEG?w=640&h=640&s=4BA43A625AFA7BAF7D302CC60000A0A1",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
          "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1147110391,1099568746&fm=173&app=25&f=JPEG?w=640&h=640&s=4BA43A625AFA7BAF7D302CC60000A0A1",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
          "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1147110391,1099568746&fm=173&app=25&f=JPEG?w=640&h=640&s=4BA43A625AFA7BAF7D302CC60000A0A1",
        ]..shuffle();
        return ActionStatus.Success;
      },
    );
  }

  Future<ActionStatus> _onLoading() async {
    return await Future.delayed(
      const Duration(seconds: 2),
      () {
        _shoppingCartViewModel.recommendGoodsItems = List.of(_shoppingCartViewModel.recommendGoodsItems)
          ..addAll(
            [
              "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
              "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
              "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
              "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1147110391,1099568746&fm=173&app=25&f=JPEG?w=640&h=640&s=4BA43A625AFA7BAF7D302CC60000A0A1",
              "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
              "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1147110391,1099568746&fm=173&app=25&f=JPEG?w=640&h=640&s=4BA43A625AFA7BAF7D302CC60000A0A1",
              "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
              "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1147110391,1099568746&fm=173&app=25&f=JPEG?w=640&h=640&s=4BA43A625AFA7BAF7D302CC60000A0A1",
              "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
              "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1147110391,1099568746&fm=173&app=25&f=JPEG?w=640&h=640&s=4BA43A625AFA7BAF7D302CC60000A0A1",
            ]..shuffle(),
          );
        return ActionStatus.Success;
      },
    );
    return ActionStatus.Success;
  }

  /// 构建对应的推荐Item
  Widget _buildItem(String img, double aspectRadio) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(3),
          boxShadow: const [
            BoxShadow(
              blurRadius: 3,
              spreadRadius: 0,
              offset: const Offset(0, 2),
              color: Color(0x14000000),
            ),
          ],
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AspectRatio(
              aspectRatio: aspectRadio,
              child: Image.network(img),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 6, bottom: 10, right: 9, left: 9),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "恭喜您获得了15%限时优惠！您有一个未完成订单立即购买享有15%限时折扣！仅限60分钟有效",
                        style: TextStyle(fontSize: 13, color: Color(0xFF333333)),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                      Text(
                        "美美的介绍",
                        style: TextStyle(fontSize: 11, color: Color(0xFF666666)),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 8, bottom: 8),
                    child: Container(
                      padding: const EdgeInsets.only(left: 5, right: 5, top: 2, bottom: 2),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(3),
                        color: Color(0xFFF7F7F7),
                      ),
                      child: Text(
                        "我是tag标签",
                        maxLines: 1,
                        style: TextStyle(
                          fontSize: 11,
                          color: Color(0xff666666),
                        ),
                      ),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text.rich(
                            TextSpan(
                              text: "￥",
                              style: const TextStyle(fontSize: 11, fontWeight: FontWeight.bold, color: Colors.black),
                              children: [
                                TextSpan(text: "1.00", style: const TextStyle(fontSize: 15)),
                              ],
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.only(left: 4),
                            child: Text(
                              "￥1.00",
                              style: TextStyle(
                                fontSize: 11,
                                fontWeight: FontWeight.w500,
                                decoration: TextDecoration.lineThrough,
                                decorationColor: Colors.grey,
                                color: Color(0xFF999999),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Icon(Icons.shopping_cart, size: 18)
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 购物车拆你喜欢
  Widget get _buildRecommendGrid {
    final double cellWidth = ((MediaQuery.of(context).size.width - 32) / 2);
    final double childAspectRatio = cellWidth / 250;
    final double aspectRadio = cellWidth / 150;
    return Selector<ShoppingCartViewModel, List<String>>(
      selector: (BuildContext p1, ShoppingCartViewModel p2) {
        return p2.recommendGoodsItems;
      },
      builder: (BuildContext context, List<String> data, Widget? child) {
        return SliverGrid(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return _buildItem(data[index], aspectRadio);
            },
            childCount: data.length,
          ),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 8,
            mainAxisSpacing: 8,
            childAspectRatio: childAspectRatio,
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return BaseProviderWidget<ShoppingCartViewModel>(
      viewModel: _shoppingCartViewModel,
      onModelReady: _onModelReady,
      child: Scaffold(
        appBar: AppBar(
          title: const Text(
            "购物车",
            style: TextStyle(fontSize: 18, color: Color(0xFF191919), fontWeight: FontWeight.bold),
          ),
          toolbarHeight: 48,
        ),
        body: PullRefresh(
          initialRefresh: true,
          enablePullRefresh: true,
          enableLoadMore: true,
          onLoading: _onLoading,
          onRefresh: _onRefresh,
          child: CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: Container(
                  alignment: Alignment.center,
                  height: 35,
                  child: Text(
                    "猜你喜欢",
                    style: TextStyle(fontSize: 16, color: Colors.black),
                  ),
                ),
              ),
              SliverPadding(
                padding: const EdgeInsets.only(left: 8, right: 8),
                sliver: _buildRecommendGrid,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
